var BomMaterialForm = function () {
  var NewBomMaterial = function () {
    var template = /* html */ `
      <div style="padding: 0 10px 5px">
        <div>
          <el-input v-model="value" size="small" placeholder="请输入新Bom工厂型号"></el-input>
        </div>
        <div style="margin-top:5px;text-align:center">
          <el-button type="primary" size="small" @click="ensure">确定</el-button>
        </div>
      </div>
    `;

    return {
      props: {
        factoryNo: {
          type: String,
          default: ''
        }
      },

      data: function () {
        return {
          value: this.factoryNo
        };
      },

      methods: {
        ensure: function () {
          var value = this.value;
          if (value.trim() === '') {
            this.$alert('请输入工厂型号', '信息');
            return;
          }
          this.$emit('new-order', value);
        }
      },

      template: template
    };
  }();

  var MaterialForm = function () {
    var template = /* html */ `
      <div class="material-form">
        <el-form label-width="auto" size="medium">
          <el-form-item label="规格">
            <el-input v-model="material.materialModel" placeholder="例:1400*170*6或1400-170-6"></el-input>
          </el-form-item>
          <el-form-item label="色号">
            <el-input v-model="material.materialColor" placeholder="例:bk001"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="material.materialColorDescription" placeholder="例:黑色"></el-input>
          </el-form-item>
        </el-form>
        <div style="text-align:center">
          <el-button size="medium" type="primary" @click="ensure">确定</el-button>
        </div>
      </div>
    `;

    return {
      data: function () {
        return {
          material: {
            materialModel: "",
            materialColor: "",
            materialColorDescription: ""
          },
          placeholder: {
            materialModel: "请输入规格",
            materialColor: "请输入色号",
            materialColorDescription: "请输入描述"
          }
        };
      },

      methods: {
        ensure: function () {
          var material = this.material;
          var fields = ['materialModel', 'materialColor', 'materialColorDescription'];
          var materialData = {
            materialCode: null,
            materialName: null,
            materialProviderName: null
          };
          for (var i = 0; i < fields.length; i++) {
            var field = fields[i];
            var value = material[field];
            if (value.trim() === '') {
              var msg = this.placeholder[field];
              this.$message(msg);
              return;
            }
            materialData[field] = value;
          }
          this.$emit('create-success', materialData);
        }
      },

      template: template
    };
  }();

  var template = /* html */ `
    <div class="bom-material-form" v-loading.fullscreen.lock="loading">
      <div style="margin-bottom:5px" class="bom-material-btns" v-if="bomForm!==null">
        <template v-if="type==='approval'">
          <el-button size="medium" type="primary" @click="approval(1)">审核通过</el-button>
          <el-button size="medium" type="danger" @click="approval(2)">退回</el-button>
        </template>
        <template v-else-if="type==='applyUpdate'">
          <el-button size="medium" type="primary" @click="ensure()">申请修改</el-button>
        </template>
        <template v-else-if="['add','update'].indexOf(type)!==-1">
          <el-button size="medium" type="primary" @click="ensure()">提交</el-button>
        </template>
        <template v-if="['approval','add'].indexOf(type)===-1">
          <el-button size="medium" type="primary" v-popover:applyPopover>保存为新bom</el-button>
          <el-popover ref="applyPopover" v-model="showPopver" placement="bottom" title="设置工厂型号" width="200" trigger="click">
            <new-bom-material v-if="showPopver" :factory-no="bomForm.factoryNo" @new-order="toNewAddBomMaterial"></new-bom-material>
          </el-popover>
        </template>
        <template v-if="type!=='approval'">
          <el-button size="medium" type="primary" style="margin-left:10px" @click="settingColConfig">配置列显示</el-button>
          <el-button size="medium" type="primary" @click="wasteRateSetting">设置损耗数据</el-button>
        </template>
        <template v-else>
          <el-button size="medium" type="primary" style="margin-left:10px" @click="wasteRateSetting">查看损耗数据</el-button>
        </template>
        <img-button v-model="bomForm.projectPicUrl" size="medium" button-text="工程图" :limit="1" :img-width="150" :img-height="150"
          :readonly="type==='approval'"></img-button>
        <img-button v-model="bomForm.enclosurePicUrl" size="medium" button-text="图纸附件" :img-width="150" :img-height="150" popper-class="enclosure-popper"
          :readonly="type==='approval'" :readonly-img="bomForm.getOldData('enclosurePicUrl')"></img-button>
        <template v-if="type!=='approval'">
          <el-button v-if="canUpdateRingSetting" size="medium" type="primary" style="margin-left:10px" @click="setRingData">开圈设定</el-button>
          <el-button size="medium" type="primary" style="margin-left:10px" @click="printMaterialLayout">打印排版图</el-button>
        </template>
      </div>
      <div v-if="bomForm!==null" class="bom-material-div">
      <div style="margin-bottom:5px;font-weight:bold">物料信息列单击从物料表里选择物料，双击输入物料信息</div>
      <div>
        <el-form inline size="medium">
          <el-form-item label="工厂型号">
            <span v-if="type==='approval'||type==='applyUpdate'">{{bomForm.factoryNo}}</span>
            <el-input v-else class="form-input" v-model="bomForm.factoryNo"></el-input>
          </el-form-item>
          <el-form-item label="圈开料尺寸">
            <span v-if="type==='approval'" :class="{'has-update':checkUpdate('ringSize')}">
              {{bomForm.ringSize===''?'无':bomForm.ringSize}}
            </span>
            <el-input v-else class="form-input" v-model="bomForm.ringSize" @change="ringSizeChange"></el-input>
          </el-form-item>
          <el-form-item label="肶开料尺寸">
            <span v-if="type==='approval'" :class="{'has-update':checkUpdate('legSize')}">
              {{bomForm.legSize===''?'无':bomForm.legSize}}
            </span>
            <el-input v-else class="form-input" v-model="bomForm.legSize" @change="calCutMaterial('legSize')"></el-input>
          </el-form-item>
          <el-form-item label="难易度">
            <span v-if="type==='approval'" :class="{'has-update':checkUpdate('difficultLevelRate')}">{{bomForm.difficultLevelRate}}%</span>
            <template v-else>
              <sys-autocomplete-number open-all-dropdown is-decimal-zero v-model="bomForm.difficultLevelRate" :options="difficultLevelList"
                value-key="rate" :min="0" :precision="1" style="width:150px" @change="difficultLevelChange">
                <template slot-scope="scope">
                  <span>{{scope.item.rank}} ({{scope.item.rate}}%)</span>
                </template>
              </sys-autocomplete-number>
              <span>%</span>
            </template>
          </el-form-item>
        </el-form>
      </div>
      <div class="material-form-content">
        <div class="material-form-title">颜色物料BOM</div>
        <div class="material-form-table">
          <table cellspacing="0" cellpadding="0">
            <tr>
              <th style="min-width:60px;max-width:60px;width:60px">序号</th>
              <th style="min-width:180px">物料类型</th>

              <template v-for="field in classifyLevel">
              <th style="min-width:120px" :key="'classifyLevel_'+field" v-if="hasField('materialColorBomCol',field)">{{i18n.getMsg('bomBusiness.materialClassify.classifyLevel.'+field)}}</th>
              </template>

              <th style="min-width:110px">仓位</th>
              <th style="min-width:120px" v-if="hasField('materialColorBomCol','materialName')">物料名称</th>
              <th style="min-width:120px" v-if="hasField('materialColorBomCol','materialModel')">物料规格</th>
              <th style="min-width:120px" v-if="hasField('materialColorBomCol','materialProviderName')">供应商</th>
              <th style="min-width:120px" v-if="hasField('materialColorBomCol','materialColor')">色号</th>
              <th style="min-width:120px" v-if="hasField('materialColorBomCol','materialColorDescription')">颜色描述</th>
              <th style="min-width:100px" v-if="hasField('materialColorBomCol','materialKlfs')">开料方式</th>
              <th style="min-width:100px">打边</th>
              <th style="min-width:140px">难易度</th>
              <th style="min-width:100px" v-if="hasField('materialColorBomCol','materialMtlktTotal')">每条料可开数</th>
              <th style="min-width:100px">投料数比例</th>
              <th style="min-width:80px;max-width:80px;width:80px" v-if="type!=='approval'">操作</th>
            </tr>

            <template v-for="(materialColor,index) in bomForm.materialColorBomList">
            <tr :key="materialColor.id">
              <td :class="{'has-table-update':checkUpdate('lineNo','materialColorBomList',index)}">
                <div v-if="type==='approval'" style="text-align:center">{{materialColor.lineNo}}</div>
                <el-input-number v-else v-model="materialColor.lineNo" class="table-input" :controls="false" size="mini" :min="1" :max="99" :precision="0">
                </el-input-number>
              </td>
              <td :class="{'has-table-update':checkUpdate('materialType','materialColorBomList',index)}">
                <span v-if="type==='approval'">{{materialColor.materialType.materialType}}</span>
                <table-select v-else filterable v-model="materialColor.materialType" :options="materialTypeList" value-key="materialType" value-field="materialType"
                  label-field="materialType" @change="materialTypeChange(materialColor)">
                  <template slot="option-item" slot-scope="scope">
                    <span style="float:left">{{scope.option.materialType}}</span>
                    <span style="float:right;color:#8492a6;font-size:13px;margin-left:10px">{{i18n.getMsg('bomBusiness.defaultWarehouse.'+scope.option.defaultWarehouse)}}</span>
                  </template>
                </table-select>
              </td>

              <template v-for="field in classifyLevel">
              <td :key="'classifyLevel_'+field" v-if="hasField('materialColorBomCol',field)" :class="{'has-table-update':checkUpdate('classifyObj','materialColorBomList',index)}">
                <template v-if="type!=='approval'&&field==='levelRankOne'">
                  <table-select clearable filterable v-model="materialColor.classifyObj" :options="classifyList" value-key="levelRankId" value-field="levelRankId"
                    label-field="levelRankOne">
                  </table-select>
                </template>
                <span v-else>{{getClassifyName(materialColor,field)}}</span>
              </td>
              </template>

              <td class="is-center" :class="{'has-table-update':checkUpdate('defaultWarehouse','materialColorBomList',index)}">
                {{getWarehouseText(materialColor.materialType)}}
              </td>
              <td v-if="hasField('materialColorBomCol','materialName')" :class="{'is-button':type!=='approval','has-table-update':checkUpdate('material','materialColorBomList',index)}"
                @click="settingMaterial(materialColor,true)">
                <span v-if="materialColor.materialObj!==null">
                  {{materialColor.materialObj.materialName}}
                </span>
              </td>
              <td v-if="hasField('materialColorBomCol','materialModel')" :class="{'is-button':type!=='approval','has-table-update':checkUpdate('material','materialColorBomList',index)}"
                @click="settingMaterial(materialColor,true)">
                <span v-if="materialColor.materialObj!==null">
                  {{materialColor.materialObj.materialModel}}
                </span>
              </td>
              <td v-if="hasField('materialColorBomCol','materialProviderName')" :class="{'is-button':type!=='approval','has-table-update':checkUpdate('material','materialColorBomList',index)}"
                @click="settingMaterial(materialColor,true)">
                <span v-if="materialColor.materialObj!==null">
                  {{materialColor.materialObj.materialProviderName}}
                </span>
              </td>
              <td v-if="hasField('materialColorBomCol','materialColor')" :class="{'is-button':type!=='approval','has-table-update':checkUpdate('material','materialColorBomList',index)}"
                @click="settingMaterial(materialColor,true)">
                <span v-if="materialColor.materialObj!==null">
                  {{materialColor.materialObj.materialColor}}
                </span>
              </td>
              <td v-if="hasField('materialColorBomCol','materialColorDescription')" :class="{'is-button':type!=='approval','has-table-update':checkUpdate('material','materialColorBomList',index)}"
                @click="settingMaterial(materialColor,true)">
                <span v-if="materialColor.materialObj!==null">
                  {{materialColor.materialObj.materialColorDescription}}
                </span>
              </td>
              <td v-if="hasField('materialColorBomCol','materialKlfs')" :class="{'has-table-update':checkUpdate('materialKlfs','materialColorBomList',index)}">
                <div v-if="type==='approval'" style="text-align:center">
                  {{materialColor.materialKlfs}}
                </div>
                <el-select v-else clearable v-model="materialColor.materialKlfs" size="mini" class="table-input" @change="calCutTableMaterial(materialColor,1)">
                  <el-option v-for="item in materialKlfsList" :key="item" :value="item"></el-option>
                </el-select>
              </td>
              <td :class="{'has-table-update':checkUpdate('beatEdge','materialColorBomList',index)}">
                <div v-if="type==='approval'" style="text-align:center">
                  {{materialColor.beatEdge}}
                </div>
                <el-input-number v-else v-model="materialColor.beatEdge" class="table-input" :controls="false" size="mini" :min="0" :precision="0"
                  @change="calCutTableMaterial(materialColor,1)">
                </el-input-number>
              </td>
              <td :class="{'has-table-update':checkUpdate('materialDifficultLevelRate','materialColorBomList',index)}">
                <div v-if="type==='approval'" style="text-align:center">{{materialColor.materialDifficultLevelRate}}%</div>
                <template v-else>
                  <sys-autocomplete-number open-all-dropdown is-decimal-zero v-model="materialColor.materialDifficultLevelRate" :options="difficultLevelList"
                    value-key="rate" size="mini" :min="0" :precision="1" style="width:calc(100% - 20px)">
                    <template slot-scope="scope">
                      <span>{{scope.item.rank}} ({{scope.item.rate}}%)</span>
                    </template>
                  </sys-autocomplete-number>
                  <span>%</span>
                </template>
              </td>
              <td v-if="hasField('materialColorBomCol','materialMtlktTotal')" :class="{'has-table-update':checkUpdate('materialMtlktTotal','materialColorBomList',index)}">
                <div v-if="type==='approval'" style="text-align:center">{{materialColor.materialMtlktTotal}}</div>
                <el-input-number v-else v-model="materialColor.materialMtlktTotal" size="mini" :controls="false" :min="0" :precision="0"
                  class="table-input">
                </el-input-number>
              </td>
              <td :class="{'has-table-update':checkUpdate('materialFeedTotalRate','materialColorBomList',index)}">
                <div v-if="type==='approval'" style="text-align:center">1:{{materialColor.materialFeedTotalRate}}</div>
                <template v-else>
                  <span>1:</span>
                  <el-input-number is-decimal-zero v-model="materialColor.materialFeedTotalRate" size="mini" :controls="false" :min="0" :precision="4"
                    style="width:calc(100% - 20px)">
                  </el-input-number>
                </template>
              </td>
              <td class="is-center" v-if="type!=='approval'">
                <el-button size="mini" type="danger" @click="delMaterialBom(materialColor,'materialColor')">删除</el-button>
              </td>
            </tr>
            </template>

            <tr v-if="type!=='approval'">
              <td :colspan="getColspan('materialColorBomCol')" class="add-row" @click="addMaterialBom('materialColor')">
                <i class="el-icon-plus"></i>
                <span>新增颜色物料</span>
              </td>
            </tr>
          </table>
        </div>
      </div>

      <div class="material-form-content">
        <div class="material-form-title">物料BOM</div>
        <div class="material-form-table">
          <table cellspacing="0" cellpadding="0">
            <tr>
              <th style="min-width:180px">物料类型</th>

              <template v-for="field in classifyLevel">
              <th style="min-width:120px" :key="'classifyLevel_'+field" v-if="hasField('materialBomCol',field)">{{i18n.getMsg('bomBusiness.materialClassify.classifyLevel.'+field)}}</th>
              </template>

              <th style="min-width:110px">仓位</th>
              <th style="min-width:120px" v-if="hasField('materialBomCol','materialName')">物料名称</th>
              <th style="min-width:120px" v-if="hasField('materialBomCol','materialModel')">物料规格</th>
              <th style="min-width:120px" v-if="hasField('materialBomCol','materialProviderName')">供应商</th>
              <th style="min-width:120px" v-if="hasField('materialBomCol','materialColor')">色号</th>
              <th style="min-width:120px" v-if="hasField('materialBomCol','materialColorDescription')">颜色描述</th>
              <th style="min-width:100px" v-if="hasField('materialBomCol','materialKlfs')">开料方式</th>
              <th style="min-width:140px">难易度</th>
              <th style="min-width:100px" v-if="hasField('materialBomCol','materialMtlktTotal')">每条料可开数</th>
              <th style="min-width:100px">投料数比例</th>
              <th style="min-width:80px;max-width:80px;width:80px" v-if="type!=='approval'">操作</th>
            </tr>

            <template v-for="(materialData,index) in bomForm.materialBomList">
            <tr :key="materialData.id">
              <td :class="{'has-table-update':checkUpdate('materialType','materialBomList',index)}">
                <span v-if="type==='approval'">{{materialData.materialType.materialType}}</span>
                <table-select v-else filterable v-model="materialData.materialType" :options="materialTypeList" value-key="materialType" value-field="materialType"
                  label-field="materialType" @change="materialTypeChange(materialData)">
                  <template slot="option-item" slot-scope="scope">
                    <span style="float:left">{{scope.option.materialType}}</span>
                    <span style="float:right;color:#8492a6;font-size:13px;margin-left:10px">{{i18n.getMsg('bomBusiness.defaultWarehouse.'+scope.option.defaultWarehouse)}}</span>
                  </template>
                </table-select>
              </td>

              <template v-for="field in classifyLevel">
              <td :key="'classifyLevel_'+field" v-if="hasField('materialBomCol',field)" :class="{'has-table-update':checkUpdate('classifyObj','materialBomList',index)}">
                <template v-if="type!=='approval'&&field==='levelRankOne'">
                  <table-select clearable filterable v-model="materialData.classifyObj" :options="classifyList" value-key="levelRankId" value-field="levelRankId"
                    label-field="levelRankOne">
                  </table-select>
                </template>
                <span v-else>{{getClassifyName(materialData,field)}}</span>
              </td>
              </template>

              <td class="is-center" :class="{'has-table-update':checkUpdate('defaultWarehouse','materialBomList',index)}">
                {{getWarehouseText(materialData.materialType)}}
              </td>
              <td v-if="hasField('materialBomCol','materialName')" :class="{'is-button':type!=='approval','has-table-update':checkUpdate('material','materialBomList',index)}"
                @click="settingMaterial(materialData)">
                <span v-if="materialData.materialObj!==null">
                  {{materialData.materialObj.materialName}}
                </span>
              </td>
              <td v-if="hasField('materialBomCol','materialModel')" :class="{'is-button':type!=='approval','has-table-update':checkUpdate('material','materialBomList',index)}"
                @click="settingMaterial(materialData)">
                <span v-if="materialData.materialObj!==null">
                  {{materialData.materialObj.materialModel}}
                </span>
              </td>
              <td v-if="hasField('materialBomCol','materialProviderName')" :class="{'is-button':type!=='approval','has-table-update':checkUpdate('material','materialBomList',index)}"
                @click="settingMaterial(materialData)">
                <span v-if="materialData.materialObj!==null">
                  {{materialData.materialObj.materialProviderName}}
                </span>
              </td>
              <td v-if="hasField('materialBomCol','materialColor')" :class="{'is-button':type!=='approval','has-table-update':checkUpdate('material','materialBomList',index)}"
                @click="settingMaterial(materialData)">
                <span v-if="materialData.materialObj!==null">
                  {{materialData.materialObj.materialColor}}
                </span>
              </td>
              <td v-if="hasField('materialBomCol','materialColorDescription')" :class="{'is-button':type!=='approval','has-table-update':checkUpdate('material','materialBomList',index)}"
                @click="settingMaterial(materialData)">
                <span v-if="materialData.materialObj!==null">
                  {{materialData.materialObj.materialColorDescription}}
                </span>
              </td>
              <td v-if="hasField('materialBomCol','materialKlfs')" :class="{'has-table-update':checkUpdate('materialKlfs','materialBomList',index)}">
                <div v-if="type==='approval'" style="text-align:center">{{materialData.materialKlfs}}</div>
                <el-select v-else clearable v-model="materialData.materialKlfs" size="mini" class="table-input" @change="calCutTableMaterial(materialData,2)">
                  <el-option v-for="item in materialKlfsList" :key="item" :value="item"></el-option>
                </el-select>
              </td>
              <td :class="{'has-table-update':checkUpdate('materialDifficultLevelRate','materialBomList',index)}">
                <div v-if="type==='approval'" style="text-align:center">{{materialData.materialDifficultLevelRate}}%</div>
                <template v-else>
                  <sys-autocomplete-number open-all-dropdown is-decimal-zero v-model="materialData.materialDifficultLevelRate" :options="difficultLevelList"
                    value-key="rate" size="mini" :min="0" :precision="1" style="width:calc(100% - 20px)">
                    <template slot-scope="scope">
                      <span>{{scope.item.rank}} ({{scope.item.rate}}%)</span>
                    </template>
                  </sys-autocomplete-number>
                  <span>%</span>
                </template>
              </td>
              <td v-if="hasField('materialBomCol','materialMtlktTotal')" :class="{'has-table-update':checkUpdate('materialMtlktTotal','materialBomList',index)}">
                <div v-if="type==='approval'" style="text-align:center">{{materialData.materialMtlktTotal}}</div>
                <el-input-number v-else v-model="materialData.materialMtlktTotal" size="mini" :controls="false" :min="0" :precision="0"
                  class="table-input">
                </el-input-number>
              </td>
              <td :class="{'has-table-update':checkUpdate('materialFeedTotalRate','materialBomList',index)}">
                <div v-if="type==='approval'" style="text-align:center">1:{{materialData.materialFeedTotalRate}}</div>
                <template v-else>
                  <span>1:</span>
                  <el-input-number is-decimal-zero v-model="materialData.materialFeedTotalRate" size="mini" :controls="false" :min="0" :precision="4"
                    style="width:calc(100% - 20px)">
                  </el-input-number>
                </template>
              </td>
              <td class="is-center" v-if="type!=='approval'">
                <el-button size="mini" type="danger" @click="delMaterialBom(materialData,'material')">删除</el-button>
              </td>
            </tr>
            </template>

            <tr v-if="type!=='approval'">
              <td :colspan="getColspan('materialBomCol')" class="add-row" @click="addMaterialBom('material')">
                <i class="el-icon-plus"></i>
                <span>新增物料</span>
              </td>
            </tr>
          </table>
        </div>
      </div>

      <div class="material-form-content">
        <div class="material-form-title">辅料BOM</div>
        <div class="material-form-table">
          <table cellspacing="0" cellpadding="0">
            <tr>
              <th style="min-width:60px;max-width:60px;width:60px">序号</th>
              <th style="min-width:180px">物料类型</th>
              
              <template v-for="field in classifyLevel">
              <th style="min-width:120px" :key="'classifyLevel_'+field" v-if="hasField('subsidiaryBomCol',field)">{{i18n.getMsg('bomBusiness.materialClassify.classifyLevel.'+field)}}</th>
              </template>

              <th style="min-width:110px">仓位</th>
              <th style="min-width:120px" v-if="hasField('subsidiaryBomCol','materialName')">物料名称</th>
              <th style="min-width:120px" v-if="hasField('subsidiaryBomCol','materialModel')">物料规格</th>
              <th style="min-width:120px" v-if="hasField('subsidiaryBomCol','materialProviderName')">供应商</th>
              <th style="min-width:120px" v-if="hasField('subsidiaryBomCol','materialColor')">色号</th>
              <th style="min-width:120px" v-if="hasField('subsidiaryBomCol','materialColorDescription')">颜色描述</th>
              <th style="min-width:100px">投料数比例</th>
              <th style="min-width:80px;max-width:80px;width:80px" v-if="type!=='approval'">操作</th>
            </tr>

            <template v-for="(subsidiary,index) in bomForm.subsidiaryBomList">
            <tr :key="subsidiary.id">
              <td style="text-align:center">
                <span>{{index+100}}</span>
              </td>
              <td :class="{'has-table-update':checkUpdate('materialType','subsidiaryBomList',index)}">
                <span v-if="type==='approval'">{{subsidiary.materialType.materialType}}</span>
                <table-select v-else filterable v-model="subsidiary.materialType" :options="materialTypeList" value-key="materialType" value-field="materialType"
                  label-field="materialType" @change="materialTypeChange(subsidiary)">
                  <template slot="option-item" slot-scope="scope">
                    <span style="float:left">{{scope.option.materialType}}</span>
                    <span style="float:right;color:#8492a6;font-size:13px;margin-left:10px">{{i18n.getMsg('bomBusiness.defaultWarehouse.'+scope.option.defaultWarehouse)}}</span>
                  </template>
                </table-select>
              </td>

              <template v-for="field in classifyLevel">
              <td :key="'classifyLevel_'+field" v-if="hasField('subsidiaryBomCol',field)"
                :class="{'has-table-update':checkUpdate('classifyObj','subsidiaryBomList',index)}">
                <template v-if="type!=='approval'&&field==='levelRankOne'">
                  <table-select clearable filterable v-model="subsidiary.classifyObj" :options="classifyList" value-key="levelRankId" value-field="levelRankId"
                    label-field="levelRankOne">
                  </table-select>
                </template>
                <span v-else>{{getClassifyName(subsidiary,field)}}</span>
              </td>
              </template>

              <td class="is-center" :class="{'has-table-update':checkUpdate('defaultWarehouse','subsidiaryBomList',index)}">
                {{getWarehouseText(subsidiary.materialType)}}
              </td>
              <td v-if="hasField('subsidiaryBomCol','materialName')" :class="{'is-button':type!=='approval','has-table-update':checkUpdate('material','subsidiaryBomList',index)}"
                @click="settingMaterial(subsidiary)">
                <span v-if="subsidiary.materialObj!==null">
                  {{subsidiary.materialObj.materialName}}
                </span>
              </td>
              <td v-if="hasField('subsidiaryBomCol','materialModel')" :class="{'is-button':type!=='approval','has-table-update':checkUpdate('material','subsidiaryBomList',index)}"
                @click="settingMaterial(subsidiary)">
                <span v-if="subsidiary.materialObj!==null">
                  {{subsidiary.materialObj.materialModel}}
                </span>
              </td>
              <td v-if="hasField('subsidiaryBomCol','materialProviderName')" :class="{'is-button':type!=='approval','has-table-update':checkUpdate('material','subsidiaryBomList',index)}"
                @click="settingMaterial(subsidiary)">
                <span v-if="subsidiary.materialObj!==null">
                  {{subsidiary.materialObj.materialProviderName}}
                </span>
              </td>
              <td v-if="hasField('subsidiaryBomCol','materialColor')" :class="{'is-button':type!=='approval','has-table-update':checkUpdate('material','subsidiaryBomList',index)}"
                @click="settingMaterial(subsidiary)">
                <span v-if="subsidiary.materialObj!==null">
                  {{subsidiary.materialObj.materialColor}}
                </span>
              </td>
              <td v-if="hasField('subsidiaryBomCol','materialColorDescription')" :class="{'is-button':type!=='approval','has-table-update':checkUpdate('material','subsidiaryBomList',index)}"
                @click="settingMaterial(subsidiary)">
                <span v-if="subsidiary.materialObj!==null">
                  {{subsidiary.materialObj.materialColorDescription}}
                </span>
              </td>
              <td :class="{'has-table-update':checkUpdate('materialFeedTotalRate','subsidiaryBomList',index)}">
                <div v-if="type==='approval'" style="text-align:center">1:{{subsidiary.materialFeedTotalRate}}</div>
                <template v-else>
                  <span>1:</span>
                  <el-input-number is-decimal-zero v-model="subsidiary.materialFeedTotalRate" size="mini" :controls="false" :min="0" :precision="4"
                    style="width:calc(100% - 20px)">
                  </el-input-number>
                </template>
              </td>
              <td class="is-center" v-if="type!=='approval'">
                <el-button size="mini" type="danger" @click="delMaterialBom(subsidiary,'subsidiary')">删除</el-button>
              </td>
            </tr>
            </template>

            <tr v-if="type!=='approval'">
              <td :colspan="getColspan('subsidiaryBomCol')" class="add-row" @click="addMaterialBom('subsidiary')">
                <i class="el-icon-plus"></i>
                <span>新增辅料</span>
              </td>
            </tr>
          </table>
        </div>
      </div>
      </div>

      <el-dialog append-to-body fullscreen class="dialog-fullscreen" :title="dialogTitle" :visible.sync="openDialog" :custom-class="['ringSetting','materialLayout'].indexOf(dialogType)!==-1?'printBomMaterial':undefined"
        @closed="dailogClosed">
        <div style="height:100%;overflow:auto">
          <template v-if="openDialog">
            <material-setting v-if="dialogType==='materialSetting'" :material-data="selectMaterialData" :dropdown-option="dropdownOption" @setting-success="settingSuccess">
            </material-setting>
            <waste-setting v-else-if="dialogType==='wasteSetting'" :bom-form="bomForm" :type="type" @setting-success="WasteSettingSuccess"></waste-setting>
            <ring-setting v-else-if="dialogType==='ringSetting'" :bom-form="bomForm" @ringsetting-success="ringSettingSuccess"></ring-setting>
            <material-layout v-else-if="dialogType==='materialLayout'" :bom-form="bomForm"></material-layout>
          </template>
        </div>
      </el-dialog>

      <el-dialog append-to-body :title="dialogTitle===''?'设置表格显示列':dialogTitle" :visible.sync="openConfig" top="calc(50vh - 230px)" width="500px" @closed="dailogClosed">
        <div style="height:400px;overflow:auto">
          <template v-if="openConfig">
            <material-form v-if="dialogType==='inputMaterial'" @create-success="createSuccess"></material-form>
            <table-col-setting v-else :config.sync="tableConfig" @setting-success="tableColSettingSuccess"></table-col-setting>
          </template>
        </div>
      </el-dialog>
    </div>
  `;

  return {
    props: {
      bomMaterial: {
        type: Object,
        default: function () {
          return null;
        }
      },
      type: {
        type: String,
        default: 'add'
      },
      dropdownOption: {
        type: Object,
        default: function () {
          return {};
        }
      },
      user: {
        type: Object,
        required: true
      }
    },

    data: function () {
      return {
        loading: false,
        bomForm: null,
        clickTime: 0,
        difficultLevelList: [],
        wasteRateList: [],
        materialTypeList: [],
        ringMaterialTypeObj: null,
        classifyList: [],
        openDialog: false,
        openConfig: false,
        dialogType: '',
        dialogTitle: '',
        selectMaterialData: null,
        tableConfig: null,
        showPopver: false,
        materialKlfsList: ['横开', '竖开', '双向'],
        classifyLevel: BomMaterialFormModel.classifyLevel,
        canUpdateRingSetting: false
      };
    },

    created: function () {
      this.loading = true;
      var self = this;
      Promise.all([
        this.getBomForm(),
        this.setDifficultLevelList(),
        this.setWasteRateList(),
        this.setMaterialTypeList(),
        this.setClassifyList(),
        this.checkUpdateRingValid()
      ]).then(function (res) {
        var bomForm = res[0];
        bomForm.setWasteRateList(self.wasteRateList);
        return self.setTableConfig(bomForm).then(function () {
          self.bomForm = bomForm;
          self.loading = false;
        });
      }).catch(function () {
        self.loading = false;
      });
    },

    methods: {
      getBomForm: function () {
        if (this.type === 'add') {
          return ajaxRequest('project/getInfo').then(function (config) {
            var bomForm = new BomMaterialFormModel(config);
            return bomForm;
          });
        }

        var bomMaterial = this.bomMaterial;
        var applyId = bomMaterial.applyId;
        var apiName, postData;
        if (SysUtil.isEmpty(applyId)) {
          postData = {
            id: bomMaterial.id
          };
          apiName = 'createOrderForBomOrder/getBomOrderById';
        } else {
          postData = {
            applyId: applyId,
          };
          apiName = 'createOrderForBomOrder/getBomOrderByApplyIdForApply';
        }

        var self = this;
        return ajaxRequest(apiName, postData).then(function (data) {
          return ajaxRequest('project/getInfo').then(function (config) {
            var bomForm = new BomMaterialFormModel(config, data);
            if (self.type === 'approval' && applyId !== null) {
              return ModuleUtil.getBeforeUpdateBom(bomMaterial, bomForm).then(function (beforeBom) {
                bomForm.setCheckUpdate(beforeBom);
                return bomForm;
              });
            }
            return ModuleUtil.setEnclosurePicUrl(bomForm);
          });
        });
      },

      setTableConfig: function (bomForm) {
        var data = null;
        if (this.type === 'add') {
          var configData = localStorage.getItem('bomMaterialConfigData');
          if (!SysUtil.isEmpty(configData)) {
            var user = this.user;
            configData = JSON.parse(configData);
            data = configData[user.companyId];
            if (data === undefined) {
              data = null;
            }
          }
        } else {
          var bomMaterial = this.bomMaterial;
          data = {
            serialNo: bomMaterial.serialNo
          };

          var applyId = bomForm.applyId;
          if (applyId !== null) {
            data.applyId = applyId;
          }
        }

        var self = this;
        return ModuleUtil.getTableConfig(data).then(function (tableConfig) {
          self.tableConfig = tableConfig;
          return tableConfig;
        });
      },

      setDifficultLevelList: function () {
        var dropdownOption = this.dropdownOption;
        var difficultLevelList = dropdownOption.difficultLevelList;
        if (difficultLevelList !== undefined) {
          this.difficultLevelList = difficultLevelList;
          return Promise.resolve(difficultLevelList);
        }

        var self = this;
        return ajaxRequest('createOrderForBomOrder/getDifficultLevelRateList', {
          status: 1
        }).then(function (res) {
          var difficultLevelList = res.returnData;
          difficultLevelList = _.map(difficultLevelList, function (obj) {
            var difficultLevelRate = obj.difficultLevelRate;
            difficultLevelRate *= 100;
            difficultLevelRate = _.round(difficultLevelRate, 1);
            return {
              rank: obj.rank,
              rate: difficultLevelRate
            }
          });
          dropdownOption.difficultLevelList = difficultLevelList;
          self.difficultLevelList = difficultLevelList;
          return difficultLevelList;
        });
      },

      setWasteRateList: function () {
        var self = this;
        return ModuleUtil.getWasteRateList(this.type, this.bomMaterial).then(function (wasteRateList) {
          self.wasteRateList = wasteRateList;
          return wasteRateList;
        });
      },

      setMaterialTypeList: function () {
        var dropdownOption = this.dropdownOption;
        var materialTypeList = dropdownOption.materialTypeList;
        if (materialTypeList !== undefined) {
          var ringMaterialTypeObj = _.find(materialTypeList, {
            materialType: '板材圈'
          });
          if (ringMaterialTypeObj === undefined) {
            ringMaterialTypeObj = null;
          }
          this.ringMaterialTypeObj = ringMaterialTypeObj;
          this.materialTypeList = materialTypeList;
          return Promise.resolve(materialTypeList);
        }

        var self = this;
        return ajaxRequest('companyMaterialType/getCompanyMaterialTypeListByPage', {
          status: 1
        }, false).then(function (res) {
          var materialTypeList = res.returnData;
          var materialTypes = [];
          var ringMaterialTypeObj = null;
          for (var i = 0; i < materialTypeList.length; i++) {
            var item = materialTypeList[i];
            var defaultWarehouse = item.defaultWarehouse;
            if (defaultWarehouse === 3) {
              continue;
            }
            var materialType = item.materialType;
            if (materialType === '板材圈') {
              ringMaterialTypeObj = item;
            }
            materialTypes.push({
              materialType: materialType,
              defaultWarehouse: item.defaultWarehouse
            });
          }
          materialTypes = _.orderBy(materialTypes, [function (obj) {
            return obj.materialType === '板材圈' ? 0 : 1;
          }], ['asc']);
          dropdownOption.materialTypeList = materialTypes;
          self.materialTypeList = materialTypes;
          self.ringMaterialTypeObj = ringMaterialTypeObj;
          return materialTypes;
        });
      },

      setClassifyList: function () {
        var self = this;
        ajaxRequest('createOrderForBomOrder/getLevelRankList', {
          status: 1
        }).then(function (res) {
          var classifyList = res.returnData;
          classifyList = _.map(classifyList, function (obj) {
            return {
              levelRankId: obj.id,
              levelRankOne: obj.levelRankOne,
              levelRankTwo: obj.levelRankTwo,
              levelRankThree: obj.levelRankThree,
              levelRankFour: obj.levelRankFour,
              levelRankFive: obj.levelRankFive,
              levelRankSix: obj.levelRankSix,
              levelRankSeven: obj.levelRankSeven,
              levelRankEight: obj.levelRankEight,
              levelRankNine: obj.levelRankNine,
              levelRankTen: obj.levelRankTen
            };
          });
          self.classifyList = classifyList;
          return classifyList;
        });
      },

      checkUpdateRingValid: function () {
        var self = this;
        return SysUtil.getUser().then(function (user) {
          var userName = user.userName;
          var operateBomKqSeter = user.companyInfo.operateBomKqSeter;
          var flag = userName === operateBomKqSeter;
          self.canUpdateRingSetting = flag;
          return flag;
        });
      },

      materialTypeChange: function (materialData) {
        materialData.materialObj = null;
      },

      settingMaterial: function (materialData, flag) {
        if (this.type === 'approval') {
          this.clickTime = 0;
          return;
        }

        if (!flag) {
          this.toSettingMaterial(materialData);
          this.clickTime = 0;
          return;
        }

        var clickTime = this.clickTime;
        this.clickTime++;
        if (clickTime === 0) {
          var self = this;
          setTimeout(function () {
            if (self.clickTime === 1) {
              self.toSettingMaterial(materialData);
            } else {
              self.toInputMaterial(materialData);
            }
            self.clickTime = 0;
          }, 300);
        }
      },

      toSettingMaterial: function (materialData) {
        var materialType = materialData.materialType;
        if (materialType === '') {
          this.$alert('请先选择物料类型', '信息')
          return;
        }
        this.selectMaterialData = materialData;
        this.dialogTitle = '设置物料';
        this.dialogType = 'materialSetting';
        this.openDialog = true;
      },

      toInputMaterial: function (materialData) {
        var materialType = materialData.materialType;
        if (materialType === '') {
          this.$alert('请先选择物料类型', '信息')
          return;
        }

        this.selectMaterialData = materialData;
        this.dialogTitle = '设置物料';
        this.dialogType = 'inputMaterial';
        this.openConfig = true;
      },

      createSuccess: function (materialObj) {
        var materialData = this.selectMaterialData;
        materialData.materialObj = materialObj;
        this.openConfig = false;
        this.calCutTableMaterial(materialData);
      },

      settingSuccess: function (materialData) {
        this.openDialog = false;
        this.calCutTableMaterial(materialData);
      },

      dailogClosed: function () {
        this.dialogTitle = '';
        this.dialogType = '';
        this.selectMaterialData = null;
      },

      addMaterialBom: function (type) {
        var bomForm = this.bomForm;
        bomForm.addMaterialData(type, this.ringMaterialTypeObj);
      },

      delMaterialBom: function (materialData, type) {
        var bomForm = this.bomForm;
        bomForm.delMaterialData(materialData, type);
      },

      getWarehouseText: function (item) {
        if (item === '') {
          return '';
        }

        var defaultWarehouse = item.defaultWarehouse;
        return i18n.getMsg(`bomBusiness.defaultWarehouse.${defaultWarehouse}`);
      },

      difficultLevelChange: function () {
        this.bomForm.resetDifficultLevel();
      },

      saveNewBom: function () {
        this.ensure('newAdd');
      },

      ensure: function (type) {
        var bomForm = this.bomForm;
        var code = bomForm.checkValid();
        if (code !== '') {
          if (typeof code === 'string') {
            var msg = i18n.getMsg(`bomBusiness.bomMaterialSetting.error.${code}`);
            this.$alert(msg, '信息');
          } else {
            var tableName = i18n.getMsg(`bomBusiness.bomMaterialSetting.tableName.${code.type}`);
            var msg = i18n.getMsg(`bomBusiness.bomMaterialSetting.error.${code.code}`);
            msg = `在${tableName}中，${msg}`;
            this.$alert(msg, '信息');
          }
          return;
        }

        var sameData = bomForm.checkSameMaterialType();
        if (sameData.length > 0) {
          var msg =
            `<div style="max-height:calc(80vh - 54px);overflow:auto"><div style="font-size:16px">相同序号有物料类型重复,具体如下:</div>${sameData.join('')}</div>`;
          this.$alert(msg, '信息', {
            dangerouslyUseHTMLString: true
          });
          return;
        }

        if (type === undefined) {
          type = this.type;
        }
        if (type === 'add') {
          this.addBomMaterial(bomForm);
        } else if (type === 'update') {
          this.updateBomMaterial(bomForm);
        } else if (type === 'applyUpdate') {
          this.applyUdateBomMaterial(bomForm);
        } else if (type === 'newAdd') {
          this.newAddBomMaterial(bomForm);
        }
      },

      addBomMaterial: function (bomForm) {
        var postData = bomForm.getObject();
        this.loading = true;
        var self = this;
        ajaxRequest('createOrderForBomOrder/saveBomOrder', {
          dataStr: JSON.stringify(postData)
        }).then(function (data) {
          return self.toSaveConfig(data).then(function () {
            self.loading = false;
            self.$alert('bom新增成功', '信息', {
              callback: function () {
                self.$emit('save-success', data);
              }
            });
          });
        }).catch(function () {
          self.loading = false;
        });
      },

      updateBomMaterial: function (bomForm) {
        var postData = bomForm.getObject('update');
        this.loading = true;
        var self = this;
        ajaxRequest('createOrderForBomOrder/updateBomOrder', {
          dataStr: JSON.stringify(postData)
        }).then(function (data) {
          return self.toSaveConfig(data).then(function () {
            self.loading = false;
            self.$alert('bom修改成功', '信息', {
              callback: function () {
                self.$emit('save-success', data);
              }
            });
          });
        }).catch(function () {
          self.loading = false;
        });
      },

      applyUdateBomMaterial: function (bomForm) {
        var postData = bomForm.getObject('update', this.user);
        this.loading = true;
        var self = this;
        ajaxRequest('createOrderForBomOrder/saveBomOrderForApply', {
          dataStr: JSON.stringify(postData)
        }).then(function (data) {
          return self.toSaveConfig(data).then(function () {
            self.loading = false;
            self.$alert('bom申请修改成功', '信息', {
              callback: function () {
                self.$emit('save-success', data);
              }
            });
          });
        }).catch(function () {
          self.loading = false;
        });
      },

      newAddBomMaterial: function (bomForm) {
        this.showPopver = false;
        var postData = bomForm.getObject();
        postData.titleBean.factoryNo = bomForm.newFactoryNo;
        this.loading = true;
        var self = this;
        ajaxRequest('createOrderForBomOrder/saveBomOrder', {
          dataStr: JSON.stringify(postData)
        }).then(function (data) {
          return self.toSaveConfig(data).then(function () {
            self.loading = false;
            self.$alert('保存为新bom成功', '信息', {
              callback: function () {
                self.$emit('newadd-success', data);
              }
            });
          });
        }).catch(function () {
          self.loading = false;
        });
      },

      toNewAddBomMaterial: function (value) {
        var bomForm = this.bomForm;
        var oldFactoryNo = bomForm.getOldData('factoryNo');
        if (value === oldFactoryNo) {
          this.$alert('输入的工厂型号，不能跟之前一样', '信息');
          return;
        }

        bomForm.newFactoryNo = value;
        this.ensure('newAdd');
      },

      toSaveConfig: function (data) {
        var tableConfig = this.tableConfig;
        var bomForm = this.bomForm;
        var wasteRateList = this.bomForm.wasteRateList;
        return Promise.all([
          ModuleUtil.toSaveTableColConfig(data, tableConfig, this.user),
          ModuleUtil.toSaveOtherImgs(data, bomForm.enclosurePicUrl),
          ModuleUtil.toSaveWasterRateConfig(data, wasteRateList)
        ]).then(function (res) {
          return res;
        });
      },

      approval: function (status) {
        var bomForm = this.bomForm;
        var applyId = bomForm.applyId;
        var apiName, postData;
        if (SysUtil.isEmpty(applyId)) {
          var bomMaterial = this.bomMaterial;
          apiName = 'createOrderForBomOrder/updateBomOrderStatus';
          postData = {
            id: bomMaterial.id,
            status: status
          };
        } else {
          if (status === 2) {
            status = 0;
          }
          apiName = 'createOrderForBomOrder/updateBomOrderForApply';
          postData = {
            id: applyId,
            status: status,
            serialNo: bomForm.serialNo
          };
        }

        this.loading = true;
        var self = this;
        ajaxRequest(apiName, postData).then(function () {
          self.loading = false;
          var msg = status === 1 ? '该bom清单审核通过' : '该bom清单成功退回';
          self.$alert(msg, '信息', {
            callback: function () {
              self.$emit('approval-success');
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      },

      settingColConfig: function () {
        this.openConfig = true;
      },

      tableColSettingSuccess: function () {
        this.openConfig = false;
      },

      hasField: function (tableName, field) {
        var tableConfig = this.tableConfig;
        if (tableConfig === null) {
          return false;
        }

        var tableColList = tableConfig[tableName];
        if (tableColList === undefined) {
          return false;
        }
        return tableColList.indexOf(field) === -1;
      },

      getColspan: function (tableName) {
        var tableConfig = this.tableConfig;
        var count = 0;
        if (tableConfig !== undefined) {
          var tableColList = tableConfig[tableName];
          if (tableColList === undefined) {
            tableColList = [];
          }
          count = tableColList.length;
        }
        if (tableName === 'materialBomCol') {
          return 22 - count;
        } else if (tableName === 'subsidiaryBomCol') {
          return 20 - count;
        } else {
          return 24 - count;
        }
      },

      checkUpdate: function (field, dataField, index) {
        if (this.type !== 'approval') {
          return false;
        }

        var applyId = this.bomMaterial.applyId;
        if (SysUtil.isEmpty(applyId)) {
          return false;
        }

        var bomForm = this.bomForm;
        return bomForm.checkUpdate(field, dataField, index);
      },

      ringSizeChange: function () {
        this.bomForm.resetMaterialCutData();
        this.calCutMaterial('ringSize');
      },

      calCutMaterial: function (type) {
        var bomForm = this.bomForm;
        if (type !== 'ringSize') {
          bomForm.calCutMaterial(type);
          return;
        }

        var materialColorBomList = bomForm.materialColorBomList;
        BomMaterialFormUtil.calMaterialListCut(bomForm, materialColorBomList);
      },

      calCutTableMaterial: function (materialData, type) {
        var materialType = _.get(materialData, 'materialType.materialType', '');
        if (materialType === '板材肶') {
          this.bomForm.calCutMaterial(undefined, materialData);
          return;
        }
        if (materialType !== '板材圈') {
          return;
        }

        if (type === undefined) {
          if (!this.bomForm.hasMaterialColorObj(materialData)) {
            return;
          }
        } else {
          if (type !== 1) {
            return;
          }
        }

        BomMaterialFormUtil.calMaterialListCut(this.bomForm, materialData);
      },

      wasteRateSetting: function () {
        this.dialogTitle = this.type === 'approval' ? '查看损耗数据' : '设置损耗数据';
        this.dialogType = 'wasteSetting';
        this.openDialog = true;
      },

      WasteSettingSuccess: function () {
        this.openDialog = false;
      },

      getClassifyName: function (materialData, field) {
        var classifyObj = materialData.classifyObj;
        if (classifyObj === '') {
          return '';
        }
        return classifyObj[field];
      },

      setRingData: function () {
        this.dialogTitle = "开圈设定";
        this.dialogType = 'ringSetting';
        this.openDialog = true;
      },

      ringSettingSuccess: function () {
        this.openDialog = false;
        this.calCutMaterial('ringSize');
      },

      printMaterialLayout: function () {
        this.dialogTitle = "排版图";
        this.dialogType = 'materialLayout';
        this.openDialog = true;
      }
    },

    components: {
      SysAutocompleteNumber: SysAutocompleteNumber,
      MaterialSetting: MaterialSetting,
      TableColSetting: TableColSetting,
      NewBomMaterial: NewBomMaterial,
      WasteSetting: WasteSetting,
      ImgButton: ImgButton,
      TableSelect: TableSelect,
      RingSetting: RingSetting,
      MaterialLayout: MaterialLayout,
      MaterialForm: MaterialForm
    },

    template: template
  };
}();
